<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <el-form ref="pram" :model="pram" :rules="rules" label-width="100px" @submit.native.prevent>
          <el-row :gutter="24">
            <el-col :span="7">
              <el-form-item label="人员类型" prop="personType" class="dislabel">
                <el-select v-model="pram.personType" placeholder="人员类型" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.personTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="姓名" prop="name" class="dislabel">
                <el-input v-model="pram.name" maxlength="100" placeholder="姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别" prop="gender" class="dislabel">
                <el-select v-model="pram.gender" placeholder="性别" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.genderList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="出生日期" prop="birthday" class="dislabel">
                <el-input v-model="pram.birthday" placeholder="出生日期"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="籍贯" prop="nativePlace" class="dislabel">
                <el-input v-model="pram.nativePlace" maxlength="50" placeholder="籍贯"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="出生地" prop="birthPlace" class="dislabel">
                <el-input v-model="pram.birthPlace" maxlength="50" placeholder="出生地"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="民族" prop="nation" class="dislabel">
                <el-select v-model="pram.nationText" placeholder="民族" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.nationList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="入党时间" prop="rdTime" class="dislabel">
                <el-input v-model="pram.rdTime" placeholder="入党时间" @click.native="handlerOpenRdTime(isCreate)"
                          readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="入伍时间" prop="rwTime" class="dislabel">
                <el-input v-model="pram.rwTime" placeholder="入伍时间"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="参加工作时间" prop="joinWorkTime" class="dislabel">
                <el-input v-model="pram.joinWorkTime" placeholder="参加工作时间"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="健康状况" prop="isHealth" class="dislabel">
                <el-select v-model="pram.isHealth" placeholder="健康状况" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.healthList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="婚姻状况" prop="maritalStatus" class="dislabel">
                <el-select v-model="pram.maritalStatusText" placeholder="婚姻状况" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.maritalStatusList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="第一学历" prop="education" class="dislabel">
                <el-select v-model="pram.educationText" placeholder="学历" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.educationList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="毕业院校" prop="school" class="dislabel">
                <el-input v-model="pram.school" maxlength="100" placeholder="毕业院校"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="所学专业" prop="major" class="dislabel">
                <el-input v-model="pram.major" maxlength="50" placeholder="所学专业"/>
              </el-form-item>
            </el-col>
            <template v-if="this.pram.personType === 31">
              <!-- 干部 -->
              <el-col :span="7">
                <el-form-item label="现在学历" prop="firstEducation" class="dislabel">
                  <el-select v-model="pram.firstEducationText" placeholder="现在学历" clearable style="width: 100%">
                    <el-option
                      v-for="(item,index) in categoryData.educationList"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="毕业院校及时间" prop="firstSchool" class="dislabel">
                  <el-input v-model="pram.firstSchool" maxlength="100" placeholder="毕业院校"/>
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="7">
              <el-form-item label="联系电话" prop="phone" class="dislabel">
                <el-input v-model="pram.phone" maxlength="50" placeholder="联系电话"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="详细住址" prop="address" class="dislabel">
                <el-input v-model="pram.address" maxlength="255" placeholder="详细住址"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="身份证号" prop="idcard" class="dislabel">
                <el-input v-model="pram.idcard" maxlength="50" placeholder="身份证号"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="是否特殊人才" prop="isSpecial" class="dislabel">
                <el-select v-model="pram.isSpecial" placeholder="是否特殊人才" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.specialList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="this.pram.personType === 31">
              <!-- 干部 -->
              <el-col :span="7">
                <el-form-item label="实际工作岗位" prop="actualJob" class="dislabel">
                  <el-input v-model="pram.actualJob" maxlength="150" placeholder="实际工作岗位"/>
                </el-form-item>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="7">
                <el-form-item label="士兵来源" prop="officersSource" class="dislabel">
                  <el-input v-model="pram.officersSource" maxlength="150" placeholder="士兵来源"/>
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="7">
              <el-form-item label="备注" prop="remark" class="dislabel">
                <el-input v-model="pram.remark" maxlength="255" placeholder="备注"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="faceUrl" class="disUpload">
            <div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
              <div v-if="pram.faceUrl" class="pictrue"><img :src="pram.faceUrl"></div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont"/>
              </div>
            </div>
          </el-form-item>
          <br>
          <el-row :gutter="24">
            <el-col :span="8" style="border-top:1px solid #eff1f7;">
              <el-form-item :label="pram.personType===31?'军官证号':'军士证号'" prop="sergeantNumber" class="dislabel">
                <el-input v-model="pram.sergeantNumber" maxlength="100"
                          :placeholder="pram.personType===31?'军官证号':'军士证号'"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" style="border-top:1px solid #eff1f7;">
              <el-form-item label="驾照" prop="license" class="dislabel">
                <el-select v-model="pram.license" placeholder="驾照" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryData.licenseList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位名称" prop="departmentId" class="dislabel">
                <el-cascader v-model="pram.departmentId" :disabled="pram.departmentId ===0" :options="parentOptions"
                             :props="categoryProps" style="width:100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="军衔等级" prop="rankTitle" class="dislabel">
                <el-input v-model="pram.rankTitle" placeholder="军衔等级"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="军衔等级时间" prop="rankTime" class="dislabel">
                <el-input v-model="pram.rankTime" placeholder="军衔时间"/>
              </el-form-item>
            </el-col>
            <template v-if="this.pram.personType === 31">
              <!-- 干部 -->
              <el-col :span="12">
                <el-form-item label="岗位层级" prop="positionLevel" class="dislabel">
                  <el-input v-model="pram.positionLevel" placeholder="岗位层级"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位层级时间" prop="positionTime" class="dislabel">
                  <el-input v-model="pram.positionTime" placeholder="岗位层级时间"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行政职务" prop="administrativePosition" class="dislabel">
                  <el-input v-model="pram.administrativePosition" placeholder="行政职务"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行政职务时间" prop="administrativeTime" class="dislabel">
                  <el-input v-model="pram.administrativeTime" placeholder="行政职务时间"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="待遇级别" prop="treatmentLevel" class="dislabel">
                  <el-input v-model="pram.treatmentLevel" placeholder="待遇级别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="待遇级别时间" prop="treatmentTime" class="dislabel">
                  <el-input v-model="pram.treatmentTime" placeholder="待遇级别时间"/>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="部职别" prop="positionDesc" class="dislabel">
                <el-input v-model="pram.positionDesc" placeholder="部职别"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="相当入伍时间" prop="departmentId" class="dislabel">
                <el-input v-model="pram.xdrwTime" placeholder="相当入伍时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="序号" prop="serialNumber" class="dislabel">
                <el-input-number v-model="pram.serialNumber" :min="0"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="其他信息" name="second">
        <el-form ref="pram1" :model="pram" :rules="rules" label-width="100px" v-if="otherInfoVisible"
                 @submit.native.prevent
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="简历" prop="resumeList" class="distable">
                <el-button icon="el-icon-circle-plus" type="text" @click.native="handlerOpenResume(0)"
                           class="resume-btn" title="添加简历"
                />
                <el-table :data="pram.resumeList" size="mini" :header-cell-style=" {fontWeight:'bold'}"
                          :show-header="false"
                >
                  <template slot="empty"><span></span></template>
                  <el-table-column prop="timeRange" width="135"/>
                  <el-table-column prop="content" min-width="200"/>
                  <el-table-column width="155">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="handlerOpenResume(1,scope.row,scope.$index)"
                                 v-hasPermi="['admin:person:info']"
                      >修改
                      </el-button>
                      <el-button type="danger" size="mini" @click="handlerResumeDel(scope.$index,scope.row)"
                                 v-hasPermi="['admin:person:delete']"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="年度考评等次" prop="checkDesc" class="distextarea">
                <el-button icon="el-icon-circle-plus" type="text" @click.native="handlerOpenCheck(isCreate)"
                           class="resume-btn" title="添加年度考评等次"
                />
                <el-input v-model="pram.checkDesc" type="textarea" maxlength="255" :rows="3" placeholder="" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item :label="'家庭主要成员及\n重要社会关系'" prop="familyList" class="distable dislineheight">
                <el-button icon="el-icon-circle-plus" type="text" @click.native="handlerOpenFamily(0)"
                           class="resume-btn" title="添加关系"
                />
                <el-table :data="pram.familyList" size="mini"
                          :header-cell-style=" {textAlign:'center',fontWeight:'bold'}"
                          :cell-style=" {textAlign:'center'}"
                >
                  <template slot="empty"><span></span></template>
                  <el-table-column label="称谓" prop="appellationText" width="50"/>
                  <el-table-column label="姓名" prop="memberName" min-width="50"/>
                  <el-table-column label="出生日期" prop="birthday" min-width="50"/>
                  <el-table-column label="政治面貌" prop="zzmmText" min-width="50"/>
                  <el-table-column label="联系电话" prop="phone" min-width="100"/>
                  <el-table-column label="工作单位及职务" prop="unit" min-width="150"/>
                  <el-table-column label="操作" width="155">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="handlerOpenFamily(1,scope.row,scope.$index)"
                                 v-hasPermi="['admin:person:info']"
                      >修改
                      </el-button>
                      <el-button type="danger" size="mini" @click="handlerFamilyDel(scope.$index,scope.row)"
                                 v-hasPermi="['admin:person:delete']"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="外出情况" name="leave">
        <el-form ref="pram2" :model="pram" :rules="rules" label-width="100px" v-if="leaveVisible"
                 @submit.native.prevent
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="外出情况" prop="leaveList" class="distable">
                <el-button icon="el-icon-circle-plus" type="text" @click.native="leaveOpenResume(0)" class="resume-btn"
                           title="休假/请假信息"
                />
                <el-table :data="pram.leaveList" size="mini" :header-cell-style=" {fontWeight:'bold'}"
                          :show-header="false"
                >
                  <template slot="empty"><span></span></template>
                  <el-table-column prop="typeText" min-width="200"/>
                  <el-table-column width="200">
                    <template slot-scope="{row}">
                      <span>{{ row.startTime }} 至 {{ row.endTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="100">
                    <template slot-scope="{row}">
                      <span>{{ row.days }} 天</span>
                    </template>
                  </el-table-column>

                  <el-table-column width="155">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="leaveOpenResume(1,scope.row,scope.$index)"
                                 v-hasPermi="['admin:person:info']"
                      >修改
                      </el-button>
                      <el-button type="danger" size="mini" @click="handlerLeaveDel(scope.$index,scope.row)"
                                 v-hasPermi="['admin:person:delete']"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- line1 -->
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-box">
      <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:person:save','admin:person:info']">
        {{ isCreate === 0 ? '确定' : '更新' }}
      </el-button>
      <el-button @click="close">取消</el-button>
    </div>

    <!-- 入党时间 -->
    <el-dialog
      :visible.sync="rdTimeDialogConfig.visible"
      :title="rdTimeDialogConfig.isCreate === 0? '政治面貌':'政治面貌'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="700px"
    >
      <zzmm
        v-if="rdTimeDialogConfig.visible"
        :is-create="rdTimeDialogConfig.isCreate"
        :edit-data="rdTimeDialogConfig.editData"
        :all-list="categoryData.zzmmList"
        @hideRdTimeDialog="hideRdTimeDialog"
        @assignRdTimeAndHideRdTimeDialog="assignRdTimeAndHideRdTimeDialog"
      />
    </el-dialog>

    <!-- 简历 -->
    <el-dialog
      :visible.sync="resumeDialogConfig.visible"
      :title="resumeDialogConfig.isCreate === 0? '简历':'简历'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="700px"
    >
      <resume
        v-if="resumeDialogConfig.visible"
        :is-create="resumeDialogConfig.isCreate"
        :edit-data="resumeDialogConfig.editData"
        :edit-key="resumeDialogConfig.editKey"
        @hideResumeDialog="hideResumeDialog"
        @assignResumeSaveAndHideResumeDialog="assignResumeSaveAndHideResumeDialog"
        @assignResumeEditAndHideResumeDialog="assignResumeEditAndHideResumeDialog"
      />
    </el-dialog>

    <!-- 职务 -->
    <el-dialog
      :visible.sync="positionDialogConfig.visible"
      :title="positionDialogConfig.isCreate === 0? '职位详情':'职位详情'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="800px"
    >
      <position
        v-if="positionDialogConfig.visible"
        :is-create="positionDialogConfig.isCreate"
        :edit-data="positionDialogConfig.editData"
        :all-tree-list="treeList"
        @hidePositionDialog="hidePositionDialog"
        @assignPositionSaveAndHidePositionDialog="assignPositionSaveAndHidePositionDialog"
        @assignPositionEditAndHidePositionDialog="assignPositionEditAndHidePositionDialog"
      />
    </el-dialog>

    <!-- 考核 -->
    <el-dialog
      :visible.sync="checkDialogConfig.visible"
      :title="checkDialogConfig.isCreate === 0? '个人年度考评等次':'个人年度考评等次'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="700px"
    >
      <check
        v-if="checkDialogConfig.visible"
        :is-create="checkDialogConfig.isCreate"
        :edit-data="checkDialogConfig.editData"
        :all-check-data="categoryData.yearCheckList"
        @hideCheckDialog="hideCheckDialog"
        @assignCheckSaveAndHideCheckDialog="assignCheckSaveAndHideCheckDialog"
        @assignCheckEditAndHideCheckDialog="assignCheckEditAndHideCheckDialog"
      />
    </el-dialog>

    <!-- 社会关系 -->
    <el-dialog
      :visible.sync="familyDialogConfig.visible"
      :title="familyDialogConfig.isCreate === 0? '家庭主要成员及重要社会关系':'家庭主要成员及重要社会关系'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="700px"
    >
      <family
        v-if="familyDialogConfig.visible"
        :is-create="familyDialogConfig.isCreate"
        :edit-data="familyDialogConfig.editData"
        :edit-key="familyDialogConfig.editKey"
        :all-nick-data="categoryData.familyList"
        :all-zzmm-data="categoryData.zzmmList"
        @hideFamilyDialog="hideFamilyDialog"
        @assignFamilySaveAndHideFamilyDialog="assignFamilySaveAndHideFamilyDialog"
        @assignFamilyEditAndHideFamilyDialog="assignFamilyEditAndHideFamilyDialog"
      />
    </el-dialog>

    <!-- 请假 -->
    <el-dialog
      :visible.sync="leaveDialogConfig.visible"
      :title="leaveDialogConfig.isCreate === 0? '添加外出情况':'编辑外出情况'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="700px"
    >
      <leave
        v-if="leaveDialogConfig.visible"
        :is-create="leaveDialogConfig.isCreate"
        :edit-data="leaveDialogConfig.editData"
        :edit-key="leaveDialogConfig.editKey"
        @hideLeaveDialog="hideLeaveDialog"
        @assignLeaveDialog="assignLeaveDialog"
        @assignLeaveEditDialog="assignLeaveEditDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import * as person from '@/api/person.js'
import zzmm from './zzmm'
import resume from './resume'
import leave from './leave'
import position from './position/index'
import check from './check/index'
import family from './family'
import train from './train'
import { Debounce } from '@/utils/validate'
import { getToken } from '@/utils/auth'

export default {
  // name: "edit"
  components: { zzmm, resume, position, check, family, train, leave },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allCategoryData: {
      type: Object
    },
    allTreeList: {
      type: Array
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'))
      } else if (!/^1[123456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'))
      } else {
        callback()
      }
    }
    const validateIdCard = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写身份证号'))
      } else if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
        callback(new Error('身份证号格式不正确!'))
      } else {
        callback()
      }
    }
    return {
      isDisabled: this.$route.params.isDisabled === '1' ? true : false,
      constants: this.$constants,
      categoryData: [],

      activeName: 'first',
      otherInfoVisible: false,
      leaveVisible: false,
      pram: {
        personType: 31,
        name: '',
        gender: '',

        birthday: '',
        nativePlace: '',
        birthPlace: '',

        nationText: '',
        rdTime: '',
        zzmm: '',
        rwTime: '',
        license: '',
        joinWorkTime: '',
        isHealth: '',
        maritalStatusText: '',

        educationText: '',
        major: '',
        school: '',
        firstEducationText: '',
        firstMajor: '',
        firstSchool: '',

        phone: '',
        address: '',
        idcard: '',

        isSpecial: '',
        actualJob: '',
        officersSource: '',
        remark: '',

        faceUrl: '',

        sergeantNumber: '',
        isHost: '',

        rankTitle: '',
        rankTime: '',
        positionLevel: '',
        positionTime: '',
        administrativePosition: '',
        administrativeTime: '',
        treatmentLevel: '',
        treatmentTime: '',

        departmentId: '',
        xdrwTime: '',
        positionDesc: '',
        departmentLevel: '',
        positionTec: '',
        positionList: [],
        resumeList: [],
        leaveList: [],
        checkDesc: '',
        checkList: [],
        familyList: [],

        trainList: [],//注释

        //编辑额外
        positionAdd: [],
        positionRemove: '',
        resumeAdd: [],
        resumeRemove: '',
        leaveRemove: '',
        resumeEdit: [],
        leaveEdit: [],
        checkAdd: [],
        checkRemove: '',
        familyAdd: [],
        familyRemove: '',
        familyEdit: [],
        serialNumber: 0,
        id: 0
      },
      rules: {
        name: [{ required: true, message: '请填写', trigger: ['blur', 'change'] }],
        gender: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
        birthday: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
        isHost: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }]
      },

      rdTimeDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      resumeDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        editKey: -1
      },
      positionDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      checkDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      leaveDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      familyDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        editKey: -1
      },
      trainDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        editKey: -1
      },

      myHeaders: { 'X-Token': getToken() },
      localFile: null,
      dialogImageUrl: null,
      treeList: [],
      roleList: [],
      parentOptions: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      }
    }
  },
  mounted() {
    this.initEditData()
    this.getDataList()
    this.getRoleList()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },

    handleClick(tab) {
      if (tab.name === 'second') {
        this.otherInfoVisible = true
      }
      if (tab.name === 'third') {
        this.confCostVisible = true
      }
      if (tab.name === 'leave') {
        this.leaveVisible = true
      }

    },

    // 入党时间dialog
    handlerOpenRdTime(isCreate, editDate) {
      /*if (isCreate === 0) */
      editDate = { 'zzmm': this.pram.zzmm, 'rdTime': this.pram.rdTime } //新增
      //console.log(this.pram,editDate)

      this.rdTimeDialogConfig.editData = editDate
      this.rdTimeDialogConfig.isCreate = isCreate
      this.rdTimeDialogConfig.visible = true
    },
    hideRdTimeDialog() {
      this.rdTimeDialogConfig.visible = false
    },
    assignRdTimeAndHideRdTimeDialog(data) {
      setTimeout(() => {
        const { zzmm, rdTime } = data
        this.pram.zzmm = zzmm
        this.pram.rdTime = rdTime

        this.rdTimeDialogConfig.visible = false
      }, 200)
    },
    getDataList() {
      this.parentOptions = [...this.allTreeList]
      // this.addTreeListLabelForCasCard(this.parentOptions, 'child')
      //this.treeList = this.allTreeList

      //if (this.isCreate !== 1) return //编辑
      const { departmentId, positionDesc, positionList } = JSON.parse(JSON.stringify(this.editData)) //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.departmentId = departmentId
      this.pram.positionDesc = positionDesc
      this.pram.positionList = positionList || []
    },
    // 简历dialog
    handlerOpenResume(isCreate, editDate, editKey) {
      this.resumeDialogConfig.editData = editDate
      this.resumeDialogConfig.isCreate = isCreate
      this.resumeDialogConfig.visible = true
      this.resumeDialogConfig.editKey = editKey
    },
    // 请假/休假
    leaveOpenResume(isCreate, editDate, editKey) {
      this.leaveDialogConfig.editData = editDate
      this.leaveDialogConfig.isCreate = isCreate
      this.leaveDialogConfig.visible = true
      this.leaveDialogConfig.editKey = editKey
    },
    hideResumeDialog() {
      this.resumeDialogConfig.visible = false
    },
    hideLeaveDialog() {
      this.leaveDialogConfig.visible = false
    },
    assignResumeSaveAndHideResumeDialog(data) {
      setTimeout(() => {
        this.pram.resumeList.push(data)
        this.resumeDialogConfig.visible = false
      }, 200)
    },
    assignLeaveDialog(data) {
      setTimeout(() => {
        this.pram.leaveList.push(data)
        this.leaveDialogConfig.visible = false
      }, 200)
    },
    assignResumeEditAndHideResumeDialog(data, key) {
      setTimeout(() => {
        this.$set(this.pram.resumeList, key, data) //更新数组中指定下标的元素

        if (this.isCreate === 1 && data.id) {
          //原有数据的编辑
          this.pram.resumeEdit.push(data)
        }
        this.resumeDialogConfig.visible = false
      }, 200)
    },
    assignLeaveEditDialog(data, key) {
      setTimeout(() => {
        this.$set(this.pram.leaveList, key, data) //更新数组中指定下标的元素
        if (this.isCreate === 1 && data.id) {
          //原有数据的编辑
          this.pram.leaveEdit.push(data)
        }
        this.leaveDialogConfig.visible = false
      }, 200)
    },
    handlerResumeDel(key, row) {
      //删除单行简历数据
      const _xKey = key
      this.pram.resumeList.splice(_xKey, 1)//index 当前元素索引；1：需要删除的元素个数
      //data=data.filter(item=>item.name!='张三');

      if (this.isCreate === 1 && row.id) {
        //编辑时的删除，记录删除ID
        const delId = row.id

        this.pram.resumeEdit = this.pram.resumeEdit.filter(item => item.id !== delId)
        //this.pram.resumeEdit.splice(_xKey,1)//从编辑项中剔除，直接删除
        this.pram.resumeRemove += delId + ','
      }
    },
    handlerLeaveDel(key, row) {
      //删除单行简历数据
      const _xKey = key
      this.pram.leaveList.splice(_xKey, 1)//index 当前元素索引；1：需要删除的元素个数
      if (this.isCreate === 1 && row.id) {
        //编辑时的删除，记录删除ID
        const delId = row.id
        this.pram.leaveEdit = this.pram.leaveEdit.filter(item => item.id !== delId)
        this.pram.leaveRemove += delId + ','
      }
    },

    // 职位dialog
    handlerOpenPosition(isCreate, editDate) {
      /*if (isCreate === 0)*/
      editDate = {
        'departmentId': this.pram.departmentId,
        'positionDesc': this.pram.positionDesc,
        'positionList': this.pram.positionList
      } //新增

      this.positionDialogConfig.editData = editDate
      this.positionDialogConfig.isCreate = isCreate
      this.positionDialogConfig.visible = true
    },
    hidePositionDialog() {
      this.positionDialogConfig.visible = false
    },
    assignPositionSaveAndHidePositionDialog(data) {
      setTimeout(() => {
        this.pram.departmentId = data.departmentId
        this.pram.positionDesc = data.positionDesc
        this.pram.positionList = data.positionList
        this.positionDialogConfig.visible = false
      }, 200)
    },
    assignPositionEditAndHidePositionDialog(data) {
      setTimeout(() => {
        this.pram.departmentId = data.departmentId
        this.pram.positionDesc = data.positionDesc
        this.pram.positionList = data.positionList //编辑时不再识别positionList
        this.pram.positionRemove += data.removeId
        this.pram.positionAdd = data.addArr
        this.positionDialogConfig.visible = false
      }, 200)
    },

    // 考核dialog
    handlerOpenCheck(isCreate, editDate) {
      /*if (isCreate === 0)*/
      editDate = { 'checkList': this.pram.checkList } //新增

      this.checkDialogConfig.editData = editDate
      this.checkDialogConfig.isCreate = isCreate
      this.checkDialogConfig.visible = true
    },
    hideCheckDialog() {
      this.checkDialogConfig.visible = false
    },
    assignCheckSaveAndHideCheckDialog(data) {
      setTimeout(() => {
        this.pram.checkDesc = data.checkDesc
        this.pram.checkList = data.checkList
        this.checkDialogConfig.visible = false
      }, 200)
    },
    assignCheckEditAndHideCheckDialog(data) {
      setTimeout(() => {
        this.pram.checkDesc = data.checkDesc
        this.pram.checkList = data.checkList
        this.pram.checkRemove += data.removeId
        this.pram.checkAdd = data.addArr
        this.checkDialogConfig.visible = false
      }, 200)
    },

    // 社会关系dialog
    handlerOpenFamily(isCreate, editDate, editKey) {
      this.familyDialogConfig.editData = editDate
      this.familyDialogConfig.isCreate = isCreate
      this.familyDialogConfig.visible = true
      this.familyDialogConfig.editKey = editKey
    },
    hideFamilyDialog() {
      this.familyDialogConfig.visible = false
    },
    assignFamilySaveAndHideFamilyDialog(data) {
      setTimeout(() => {
        this.pram.familyList.push(data)
        this.familyDialogConfig.visible = false
      }, 200)
    },
    assignFamilyEditAndHideFamilyDialog(data, key) {
      setTimeout(() => {
        this.$set(this.pram.familyList, key, data) //更新数组中指定下标的元素

        if (this.isCreate === 1 && data.id) {
          //原有数据的编辑
          this.pram.familyEdit.push(data)
        }
        this.familyDialogConfig.visible = false
      }, 200)
    },
    handlerFamilyDel(key, row) {
      //删除单行关系数据
      const _xKey = key
      this.pram.familyList.splice(_xKey, 1)//index 当前元素索引；1：需要删除的元素个数
      //data=data.filter(item=>item.name!='张三');

      if (this.isCreate === 1 && row.id) {
        //编辑时的删除，记录删除ID
        const delId = row.id

        this.pram.familyEdit = this.pram.familyEdit.filter(item => item.id !== delId)
        //this.pram.familyEdit.splice(_xKey,1)//从编辑项中剔除，直接删除
        this.pram.familyRemove += delId + ','
      }
    },

    // 军事训练dialog
    handlerOpenTrain(isCreate, editDate, editKey) {
      this.trainDialogConfig.editData = editDate
      this.trainDialogConfig.isCreate = isCreate
      this.trainDialogConfig.visible = true
      this.trainDialogConfig.editKey = editKey
    },
    hideTrainDialog() {
      this.trainDialogConfig.visible = false
    },
    assignTrainSaveAndHideTrainDialog(data) {
      setTimeout(() => {
        this.pram.trainList.push(data)
        this.trainDialogConfig.visible = false
      }, 200)
    },
    assignTrainEditAndHideTrainDialog(data, key) {
      setTimeout(() => {
        this.$set(this.pram.trainList, key, data) //更新数组中指定下标的元素
        this.trainDialogConfig.visible = false

      }, 200)
    },
    handlerTrainDel(key) {
      //删除单行训练数据
      const _xKey = key
      this.pram.trainList.splice(_xKey, 1)//index 当前元素索引；1：需要删除的元素个数
      //data=data.filter(item=>item.name!='张三');
    },

    // 具体日期
    onchangeBirthdayTime(e) {
      this.pram.birthday = e
    },
    onchangeJoinWorkTime(e) {
      this.pram.joinWorkTime = e
    },
    onchangeRwTime(e) {
      this.pram.rwTime = e
    },
    onchangeRankTime(e) {
      this.pram.rankTime = e
    },
    onchangePositionTime(e) {
      this.pram.positionTime = e
    },
    onchangeAdministrativeTime(e) {
      this.pram.administrativeTime = e
    },
    onchangeTreatmentTime(e) {
      this.pram.treatmentTime = e
    },

    //照片相关
    // 点击商品图
    modalPicTap(tit, num, i, status) {
      const _this = this
      if (_this.isDisabled) return
      this.$modalUpload(function(img) {
        if (tit === '1' && !num) {

          _this.pram.faceUrl = img[0].attDir
        }
      }, tit, 'content')
    },
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg' || 'image/gif' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 10

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 10MB!')
      }
      return isIMAGE && isLt1M
    },

    handlerImgDel() {
      this.pram.faceUrl = null
      this.dialogImageUrl = null
    },

    initEditData() {
      this.categoryData = this.allCategoryData
      this.treeList = this.allTreeList

      if (this.isCreate !== 1) return //编辑
      this.pram = { ...this.editData }

      //初始化
      this.pram.positionList = this.pram.positionList || []
      this.pram.resumeList = this.pram.resumeList || []
      this.pram.leaveList = this.pram.leaveList || []
      this.pram.checkList = this.pram.checkList || []
      this.pram.familyList = this.pram.familyList || []

      //初始化编辑需要用到的data
      this.pram.positionAdd = []
      this.pram.positionRemove = ''
      this.pram.resumeAdd = []
      this.pram.resumeRemove = ''
      this.pram.leaveRemove = ''
      this.pram.resumeEdit = []
      this.pram.leaveEdit = []
      this.pram.checkAdd = []
      this.pram.checkRemove = ''
      this.pram.familyAdd = []
      this.pram.familyRemove = ''
      this.pram.familyEdit = []

      /*const { name, gender, birthday, faceUrl, isSpecial, nation, nativePlace, birthPlace, zzmm, rdTime, joinWorkTime, isHealth, education, major, school, personType, rwTime, positionLevel, positionTec, rankTitle, phone, idcard, address, positionDesc, positionList, resumeList, checkDesc, checkList, familyList, trainList, id } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.name = name
      this.pram.gender = gender
      this.pram.birthday = birthday
      this.pram.faceUrl = faceUrl
      this.pram.isSpecial = isSpecial
      this.dialogImageUrl = faceUrl
      this.pram.nation = nation
      this.pram.nativePlace = nativePlace
      this.pram.birthPlace = birthPlace
      this.pram.zzmm = zzmm
      this.pram.rdTime = rdTime
      this.pram.joinWorkTime = joinWorkTime
      this.pram.isHealth = isHealth
      this.pram.education = education
      this.pram.major = major
      this.pram.school = school
      this.pram.personType = personType
      this.pram.rwTime = rwTime
      this.pram.positionLevel = positionLevel
      this.pram.positionTec = positionTec
      this.pram.rankTitle = rankTitle
      this.pram.phone = phone
      this.pram.idcard = idcard
      this.pram.address = address
      this.pram.positionDesc = positionDesc
      this.pram.positionList = positionList
      this.pram.resumeList = resumeList

      this.pram.checkDesc = checkDesc
      this.pram.checkList = checkList

      this.pram.familyList = familyList
      this.pram.trainList = trainList

      this.pram.id = id*/
    },
    handlerSubmit: Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          //alert();
          return
        }
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      //console.log(this.pram);return false;
      person.personAdd(this.pram).then(data => {
        this.$message.success('创建人员成功')
        this.$emit('hideEditDialog')
      })
    },
    getRoleList() {
      roleApi.getRoleNameList().then(data => {
        this.roleList = data
      })
    },
    handlerEdit() {
      this.pram.positionRemove = this.pram.positionRemove.substring(0, this.pram.positionRemove.length - 1)
      this.pram.resumeAdd = this.pram.resumeList.filter(item => !item.id)
      this.pram.resumeRemove = this.pram.resumeRemove.substring(0, this.pram.resumeRemove.length - 1)
      this.pram.checkRemove = this.pram.checkRemove.substring(0, this.pram.checkRemove.length - 1)
      this.pram.familyAdd = this.pram.familyList.filter(item => !item.id)
      this.pram.familyRemove = this.pram.familyRemove.substring(0, this.pram.familyRemove.length - 1)
      this.pram.leaveAdd = this.pram.leaveList.filter(item => !item.id)
      this.pram.leaveRemove = this.pram.leaveRemove.substring(0, this.pram.leaveRemove.length - 1)

      person.personUpdate(this.pram).then(data => {
        this.$message.success('更新人员成功')
        this.$emit('hideEditDialog')
      })
    },

    // 上传
    handleUploadForm_delete(param) {
      const formData = new FormData()
      formData.append('multipart', param.file)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      /*fileImageApi(formData)
        .then((res) => {*/
      //图片上传接口 后期调用
      let res = []
      this.pram.faceUrl = res.faceUrl

      loading.close()
      this.$message.success('上传成功')
      /*})
      .catch((res) => {
        loading.close();
      });*/
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl_delete(event) {
      // 也可以用file
      this.localFile = event.raw // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader()
      reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        //console.integralLog(reader.result)
      }

      /* 另外一种本地预览方法 */

      let URL = window.URL || window.webkitURL
      this.dialogImageUrl = URL.createObjectURL(event.raw)
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  width: 97%;
  margin: auto;
}

.el-row {
  //border-bottom:1px solid #eff1f7 !important;
  border-right: 1px solid #eff1f7 !important;
}

.el-row:nth-child(1) {
  border-top: 1px solid #eff1f7 !important;
}

.el-col {
  /*border-right: 1px solid #eff1f7 !important;*/
  padding: 0px !important;
  border-bottom: 1px solid #eff1f7 !important;

  ::v-deep.el-form-item__error {
    z-index: 9;
  }
}

.el-form-item {
  margin-bottom: 0 !important;
}

.btn-box {
  margin-top: 20px;
}

.resume-btn {
  position: absolute;
  font-size: 24px;
  bottom: 10px;
  left: -94px;
}

.dislabel {
  ::v-deep.el-form-item__label {
    text-align: center !important;
    /*border-right:1px solid #ccc !important;*/
    background-color: #f5f5fd !important;
    color: #9a9b9b;
    line-height: 40px;
    padding-right: 0 !important;
    width: 130px !important;
  }

  ::v-deep.el-form-item__content {
    margin-left: 130px !important;
  }

  ::v-deep.el-input--small .el-input__inner,
  ::v-deep.el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
    border: 0;
    font-size: 12px;
  }

  ::v-deep.el-date-editor .el-input__inner {
    padding: 0 15px 0 30px !important;
  }

  ::v-deep.el-button span {
    position: relative;
    top: 2px;
  }

  ::v-deep.el-button--text {
    padding: 0 15px;
    color: #ccc !important;
  }
}

.disUpload {
  position: absolute;
  z-index: 2;
  top: 0px;
  right: 3px;
  background-color: #fff;
  width: 121px;
  height: 165px;
  border-top: 1px solid #eff1f7;
  border-left: 1px solid #eff1f7;
  border-bottom: 1px solid #eff1f7;
  display: flex;
  justify-content: center;
  align-items: center;

  ::v-deep.upLoadPicBox {
    .upLoad {
      width: 120px !important;
      height: 165px !important;
      border: 0 !important;
      background: 0 !important;
    }

    .pictrue {
      position: absolute;
      z-index: 3;
      top: 1px;
      right: -70px;
      width: 120px;
      height: 165px;
      border: 0;
    }
  }

  .imgDel {
    position: absolute;
    z-index: 4;
    top: 0;
    border: 0;
    width: 20px !important;
    height: 20px !important;
    text-align: center;
    right: -1px;
    padding: 0px !important;
    line-height: 10px !important;
    border-radius: 0 !important;
    font-weight: bold;
  }

  .img-box {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 120px;
    height: 165px;
    border: 0;
  }

  ::v-deep.el-form-item__content {
    margin-left: 0 !important;
    line-height: 168px
  }

  ::v-deep.el-upload {
    width: 100%;
  }

  ::v-deep.el-button {
    width: 100%;
    border: 0 !important;
  }

  ::v-deep.el-button:hover {
    background-color: #fff !important;
  }
}

.distable {
  height: 210px;

  /* 隐藏伪元素 */
  ::v-deep.el-table::before {
    display: none !important;
  }

  /* 重现下自带下边框线 */
  .el-table--border {
    border-bottom: 1px solid #fff !important;
  }

  ::v-deep.el-table {
    height: 210px;
    overflow-y: auto;

    td div {
      padding-left: 15px !important;
    }
  }

  ::v-deep.el-form-item__label {
    text-align: center !important;
    /*border-right:1px solid #ccc !important;*/
    background-color: #f5f5fd !important;
    color: #9a9b9b;
    line-height: 210px;
    padding-right: 0 !important;
    width: 130px !important;
    white-space: pre-line !important;
  }

  ::v-deep.el-form-item__content {
    margin-left: 130px !important;
  }

  ::v-deep.el-input--small .el-input__inner,
  ::v-deep.el-input--medium .el-input__inner {
    height: 40px;
    line-height: 40px;
    border: 0;
    font-size: 12px;
  }

  ::v-deep.el-date-editor .el-input__inner {
    padding: 0 15px 0 30px !important;
  }

  ::v-deep.el-button--text {
    padding: 0 15px;
    color: #ccc !important;
  }
}

.distextarea {
  height: 75px;

  ::v-deep.el-form-item__label {
    text-align: center !important;
    /*border-right:1px solid #ccc !important;*/
    background-color: #f5f5fd !important;
    color: #9a9b9b;
    line-height: 75px;
    padding-right: 0 !important;
    width: 130px !important;
  }

  ::v-deep.el-form-item__content {
    margin-left: 130px !important;
  }

  ::v-deep.el-textarea__inner {
    border: 0;
    font-size: 12px;
  }

  ::v-deep.el-button--text {
    padding: 0 15px;
    color: #ccc !important;
    bottom: 1px;
  }
}

.dislineheight {
  ::v-deep.el-form-item__label {
    line-height: 16px !important;
    white-space: pre-line !important;
    padding: 94px 0;
  }
}
</style>
